
body {
    margin:0;
    height:100vh;
    display:grid;
    place-items:center;
    background:lightblue;
    overflow:hidden;
  }
  .growing {
    width:150px;
    height:150px;
    position:relative;
    clip-path:inset(-100vh 0);
  }
  .growing:before {
    content:"";
    display:block;
    width:400%;
    height:100%;
    background:
      /*1*/
      radial-gradient(farthest-side,#639510 97%,#0000) 12.5% 65%/12px 9px,
      linear-gradient(#996b52 0 0) 9% 80%/9.4% 9%,
      linear-gradient(#996b52 0 0) 10% 100%/7% 25%,
      linear-gradient(#639510 0 0) 12.5% 100%/5px 36%,   
      /*2*/    
      radial-gradient(farthest-side,#639510 97%,#0000) 35.5% 50%/15px 10px,
      radial-gradient(farthest-side,#639510 97%,#0000) 38% 64%/15px 10px ,
      linear-gradient(#996b52 0 0) 35.5% 80%/9.4% 9%,
      linear-gradient(#996b52 0 0) 36% 100%/7% 25%,
      linear-gradient(#639510 0 0) 37% 100%/5px 52%,    
      /*3*/
      radial-gradient(farthest-side,#fb3e4c 98%,#0000) 64.5% 40.5%/10px 9px,
      radial-gradient(farthest-side at bottom,#0000 calc(100% - 5px),#639510 0 100%,#0000)63.6% 34%/20px 10px,
      radial-gradient(farthest-side,#639510 97%,#0000) 61% 50%/15px 10px,
      radial-gradient(farthest-side,#639510 97%,#0000) 63.5% 64%/15px 10px ,
      linear-gradient(#996b52 0 0) 63.5% 80%/9.4% 9%,
      linear-gradient(#996b52 0 0) 63.1% 100%/7% 25%,
      linear-gradient(#639510 0 0) 62% 100%/5px 62%,
      /*4*/
      radial-gradient(farthest-side at 50% 4px,#fb3e4c 98%,#0000) 88.1% 17.5%/17px 13px,
      radial-gradient(farthest-side,#639510 97%,#0000) 87% 50%/15px 10px,
      radial-gradient(farthest-side,#639510 97%,#0000) 89.5% 38%/15px 10px,
      radial-gradient(farthest-side,#639510 97%,#0000) 89.5% 64%/15px 10px,
      linear-gradient(#996b52 0 0) 91% 80%/9.4% 9%,
      linear-gradient(#996b52 0 0) 90% 100%/7% 25%,
      linear-gradient(#639510 0 0) 87.5% 100%/5px 77%;
    background-repeat:no-repeat;
    animation:m 4s .5s both;
  }
  .growing:after {
      content: "";
      position: absolute;
      inset: -100vh 49px 42px 54px;
      background: 
        conic-gradient(at 2px 50%,#0000 270deg,#fff 0)0 0/8px 10px,
        conic-gradient(at 2px 50%,#0000 270deg,#fff 0)4px 5px/8px 10px;
    animation:s 4s .5s both;
  }
  
  @keyframes m{
    0%,20%  {transform:translate(0%)}
    33.33%,53.33% {transform:translate(-24%)}
    66.66%,86.66% {transform:translate(-49.5%)}
    100%{transform:translate(-74.5%)}
  }
  
  @keyframes s {
    0% {inset: -100vh 49px 100vh 54px}
    10% {inset: -100vh 49px 42px 54px;opacity:1}
    20% {inset: -100vh 49px 42px 54px;opacity:0}
    20.01%,
    33.33% {inset: -100vh 49px 100vh 54px;opacity:1}
    43.33% {inset: -100vh 49px 42px 54px;opacity:1}
    53.33% {inset: -100vh 49px 42px 54px;opacity:0}
    53.34%,
    66.66% {inset: -100vh 49px 100vh 54px;opacity:1}
    76.66% {inset: -100vh 49px 42px 54px;opacity:1}
    86.66%,
    100%{inset: -100vh 49px 42px 54px;opacity:0}
  }